<script setup lang="ts">
import { ref } from 'vue';

import { message } from 'ant-design-vue';

import { link1688stor } from '#/store';

const getUrlData: any = ref('');
const bindOffId: any = ref('');
const link1688 = link1688stor();
const remarkInput: any = ref('');
function cheackUrlLink() {
  try {
    const urlObj = new URL(getUrlData.value);
    // console.log(urlObj);
    const in1688links = urlObj.origin + urlObj.pathname;

    const pattern = /offer\/(\d+).html/;
    if (!pattern.test(in1688links)) {
      throw new Error('请输入正确的链接');
    }
    const match = in1688links.match(pattern);

    if (match) {
      // 提取并打印数字
      getUrlData.value = in1688links;
      const number = match[1];
      // console.log('提取的数字是:', number);
      bindOffId.value = number;
    } else {
      throw new Error('请输入正确的链接');
    }
  } catch {
    message.error('请输入正确的链接');
  }
}

async function bindOffIdFunc(_params: any) {
  const bindData = {
    offerIds: [bindOffId.value],
    // productId: ,
    remark: remarkInput.value,
    // shopId: '123791841',
  };
  const binres = await link1688.bind1688SourceApiFun(bindData);
  if (binres.status) {
    message.success('添加成功');
    remarkInput.value = '';
    getUrlData.value = '';
    link1688.getBind1688SourceApiFun();
  } else {
    message.error('添加失败');
  }
}
</script>

<template>
  <div class="w-full">
    <a-form-item class="mb-0" label="添加新货源：">
      <div class="flex">
        <a-input
          v-model:value="getUrlData"
          class="mr-4"
          placeholder="请输入1688货源地址链接"
          @blur="cheackUrlLink"
        />
        <a-input
          v-model:value="remarkInput"
          class="mr-4 w-3/4"
          placeholder="请输入备注"
        />
        <a-button type="primary" @click="bindOffIdFunc">添加</a-button>
      </div>
    </a-form-item>
  </div>
</template>
